<template>
  <el-row>
    <el-card>
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item :label="$t('reportModule.conversionData.data')">
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="~"
            :start-placeholder="$t('common.startDate')"
            :end-placeholder="$t('common.endDate')"
          />
        </el-form-item>
        <el-form-item :label="$t('collectionManagement.report.data.reBorrow')">
          <el-select v-model="searchForm.firstLoan" clearable :placeholder="$t('collectionManagement.report.prompt.select')">
            <el-option
              v-for="item in $t('collectionManagement.report.borrowData')"
              :key="item.value"
              :label="item.desc"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('reportModule.conversionData.deviceType')">
          <el-select v-model="searchForm.deviceType" clearable :placeholder="$t('common.select')">
            <el-option
              v-for="item in $t('reportModule.conversionData.deviceData')"
              :key="item.value"
              :label="item.desc"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-row>
          <el-button type="primary" @click="search">
            {{ $t('common.search') }}
          </el-button>
          <el-button @click="reset">
            {{ $t('common.reset') }}
          </el-button>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-button :type="dayType === 1 ? 'primary' : ''" @click="setDay">
            {{ $t('reportModule.conversionData.sevenDay') }}
          </el-button>
          <el-button :type="dayType === 2 ? 'primary' : ''" @click="setMonth">
            {{ $t('reportModule.conversionData.month') }}
          </el-button>
        </el-row>
      </el-form>
    </el-card>
    <el-card v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="12">
          <table>
            <tr>
              <td />
              <td style="text-align:center;">
                {{ $t('reportModule.platformUsersBuried.clickCount') }}
              </td>
              <td style="text-align:center;">
                {{ $t('reportModule.platformUsersBuried.userNumber') }}
              </td>
            </tr>
            <tr v-for="(item, index) in $t('reportModule.platformUsersBuried.table')" :key="index" :class="item['selectName'] === searchForm.eventName ? 'blue' : 'default'" @click="changeShow(index)">
              <td>{{ item['desc'] }}</td>
              <td>{{ tableData[item['clickCount']] ? tableData[item['clickCount']] : 0 }}</td>
              <td>{{ tableData[item['userNumber']] ? tableData[item['userNumber']] : 0 }}</td>
            </tr>
          </table>
        </el-col>
        <el-col :span="12" :loading="chartLoading">
          <div style="width: 100%" :style="{'height':top+'px'}" />
          <chart :conf="chartsConf" />
        </el-col>
      </el-row>
    </el-card>
  </el-row>
</template>

<script>
import { platformUsersBuried, platformUsersBuriedList } from '@/api/report'
import { formatDate } from '@/utils/method'
import Chart from '@/components/Charts/commonChart'
export default {
  name: 'PlatformUsersBuried',
  components: {
    Chart
  },
  data() {
    return {
      loading: false,
      chartLoading: false,
      tableData: {},
      time: [new Date((new Date()).getTime() - 1000 * 60 * 60 * 24 * 6), new Date()],
      dayType: 1,
      searchForm: this.params(),
      top: 0,
      chartsConf: null
    }
  },
  mounted() {
    this.getData()
    this.changeShow(0)
  },
  methods: {
    params() {
      return {
        startTime: null,
        endTime: null,
        eventName: 'sendMsg'
      }
    },
    setDay() {
      this.dayType = 1
      this.time = [new Date((new Date()).getTime() - 1000 * 60 * 60 * 24 * 6), new Date()]
      this.getData()
    },
    setMonth() {
      this.dayType = 2
      this.time = [new Date((new Date()).getTime() - 1000 * 60 * 60 * 24 * 30), new Date()]
      this.getData()
    },
    search() {
      this.searchForm.currentPage = 1
      this.getData()
    },
    reset() {
      this.searchForm = this.params()
      this.setDay()
      this.getData()
      this.changeShow(0)
    },
    searchData() {
      const data = this.searchForm
      if (this.time && this.time.length > 1) {
        data['startTime'] = formatDate(new Date(this.time[0]), 'yyyy-MM-dd') + ' 00:00:00'
        data['endTime'] = formatDate(new Date(this.time[1]), 'yyyy-MM-dd') + ' 23:59:59'
      } else {
        data['startTime'] = null
        data['endTime'] = null
      }
      return data
    },
    getData() {
      this.loading = true
      platformUsersBuried(this.searchData())
        .then(res => {
          this.loading = false
          if (res.success) {
            this.tableData = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
    },
    changeShow(index) {
      this.chartLoading = true
      this.top = index < 8 ? 0 : 50 * (index - 8)
      const item = this.$t('reportModule.platformUsersBuried.table')[index]
      this.searchForm.eventName = item['selectName']
      platformUsersBuriedList(this.searchData())
        .then(res => {
          this.chartLoading = false
          const xAxis = []
          const clickCount = []
          const userCount = []
          if (res.success) {
            if (res.data) {
              res.data.forEach(v => {
                xAxis.push(v['dateStr'])
                clickCount.push(v['clickCount'])
                userCount.push(v['userCount'])
              })
              const seriesData = [
                {
                  name: this.$t('reportModule.platformUsersBuried.clickCount'),
                  type: 'line',
                  data: clickCount
                },
                {
                  name: this.$t('reportModule.platformUsersBuried.userNumber'),
                  type: 'line',
                  data: userCount
                }
              ]
              this.chartsConf = {
                title: {
                  text: item.desc
                },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  bottom: 'bottom',
                  data: [this.$t('reportModule.platformUsersBuried.clickCount'), this.$t('reportModule.platformUsersBuried.userNumber')]
                },
                calculable: true,
                xAxis: [
                  {
                    type: 'category',
                    axisLabel: {
                      interval: 0,
                      rotate: 30
                    },
                    data: xAxis
                  }
                ],
                yAxis: [
                  {
                    type: 'value'
                  }
                ],
                series: seriesData
              }
            }
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.chartLoading = false
          this.$message.error(err.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-card{
    margin: 10px;
  }
  table{
    width: 100%;
    border-collapse: collapse;
    tr{
      width: 100%;
      text-align: center;
      td{
        height: 50px;
        border: 1px #cccccc solid;
      }
    }
  }
  .blue{
    background:#409EFF !important;
    color: #ffffff;
  }
</style>
